/**
 * @description  净值分析
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { message, Row, Col } from 'antd';
import { ContentPackage, DATA_ENTRY, NoQueryC, SecondHeaderC, AdvancedSearch } from '../../../components';
import style from './index.less';
import Memorabilia from './Memorabilia';
import DimensionTable from './dimensionTable';
import ShowEchartsOne from './showEchartsOne';
import ShowEchartsTwo from './showEchartsTwo';
import NetValueTable from './netVlueTable';
import ContrastData from './contrastData';
import moment from 'moment';

class NetValueAnalysis2 extends PureComponent {
  constructor() {
    super();
    this.state = {
      disabled: true,
      portfolioCode: '',
      productData: '',
      isShow: false,
      codeKey: null,
    };
  }

  componentDidMount() {
    this.getStorageData();
  }

  // 搜索点击事件
  searchData = (e) => {
    const { dispatch } = this.props;
    if (e.product) {
      if (e.begin1 && e.begin2) {
        const query = {
          rangeType: e.complextdate1,
          portfolioCode: this.state.productData,
          startDate: e.begin1.format('YYYY-MM-DD'),
          endDate: e.begin2.format('YYYY-MM-DD'),
        };
        dispatch({
          type: 'netValueM/save',
          payload: {
            echartsData1: { xAxis: [], series: undefined },
            echartsData2: { xAxis: [], series: undefined },
            bigEventData: {
              bdDate: '',
              edDate: '',
              series: [],
            },
          },
        });

        dispatch({
          type: 'netValueM/getTimeLine',
          payload: { port_id: this.state.productData },
        });
        dispatch({
          type: 'netValueM/getReNetfrepstat',
          payload: query,
        });
        dispatch({
          type: 'netValueM/getReNetvaluelist',
          payload: query,
        });

        this.setState({
          isShow: true,
        });
      } else {
        message.warning('请选择时间区间');
        this.setState({
          beginDate: undefined,
          endDate: undefined,
        });
      }
    } else {
      message.warning('请选择选择产品');
    }
  };

  // 从组合概览跳转   拿到sessionStorage中的查询条件
  getStorageData = () => {
    const overviewData = JSON.parse(sessionStorage.getItem('searchObj'));
    sessionStorage.removeItem('searchObj');
    if (overviewData) {
      const { portfolioCode, timeRange, beginDate, endDate, codeKey } = overviewData;
      this.setState(
        {
          portfolioCode,
          timeRange,
          beginDate,
          endDate,
          codeKey,
          productData: portfolioCode,
        },
        () => {
          const { beginDate, endDate, codeKey, timeRange, productData } = this.state;
          const obj = {
            begin1: moment(beginDate),
            begin2: moment(endDate),
            product: codeKey,
            portfolioCode: productData,
            complextdate1: timeRange,
            rangeType: timeRange,
          };
          setTimeout(() => {
            if (productData) {
              this.state.HOlDDATERANGEC.state.COMPLEXDATE.setSelctAndDate(timeRange, moment(beginDate), moment(endDate));
            }
          }, 2000);
          this.searchData(obj);
        },
      );
    }
  };

  render() {
    const { isShow, portfolioCode, timeRange, beginDate, endDate, codeKey } = this.state;
    const { loading } = this.props;
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'product',
          title: '产品名称',
          type: DATA_ENTRY.PRODUCTLIST,
          dataType: 2,
          onChange: (e) => {
            if (e) {
              this.setState({
                portfolioCode: e.info.portfolioCode,
                productData: e.info.portfolioCode,
                portfolioName: e.info.portfolioName,
              });
            } else {
              this.setState({
                portfolioCode: '',
                productData: '',
              });
            }
          },
          initialValue: codeKey,
        },
        {
          selectIndex: 'complextdate1',
          startIndex: 'begin1',
          endIndex: 'begin2',
          type: DATA_ENTRY.HOlDDATERANGEC,
          productCode: this.state.portfolioCode,
          defaultType: timeRange || '2',
          flag: '2',
          onRef: (ref) => this.setState({ HOlDDATERANGEC: ref }),
        },
      ],
      onQuery: (e) => {
        this.searchData(e);
      },
      onClear: () => {
        this.setState({
          portfolioCode: '',
          productData: '',
          codeKey: '', // 清空产品框
          timeRange: '',
        });
      },
    };

    return (
      <ContentPackage
        title='净值分析'
        contentHtml={
          <div className={style.bodyAreas} style={{ padding: '0 12px' }}>
            <div className='mainArea' style={{ marginBottom: '10px' }}>
              <AdvancedSearch {...searchProps} />
            </div>
            {isShow ? (
              <div>
                <div style={{ marginTop: '10px' }}>
                  <SecondHeaderC title='大事记时间线' />
                  <Memorabilia loading={loading} />
                </div>
                <div style={{ marginTop: '10px' }}>
                  <SecondHeaderC title='维度统计' />
                  <DimensionTable loading={loading} />
                </div>
                <div style={{ height: '320px', marginTop: '10px' }}>
                  <Row gutter={16}>
                    <Col span={12}>
                      <SecondHeaderC title='净值趋势图' />
                      <div className='echarts_one'>
                        <ShowEchartsOne loading={loading} />
                      </div>
                    </Col>
                    <Col span={12}>
                      <SecondHeaderC title='份额趋势图' />
                      <div className='echarts_two'>
                        <ShowEchartsTwo loading={loading} />
                      </div>
                    </Col>
                  </Row>
                </div>
                <div>
                  <SecondHeaderC title='净值明细' />
                  <Row gutter={16}>
                    <Col span={12}>
                      <div className={style.tex_Area}>
                        <ContrastData loading={loading} />
                      </div>
                    </Col>
                    <Col span={12}>
                      <NetValueTable loading={loading} />
                    </Col>
                  </Row>
                </div>
              </div>
            ) : (
              <div style={{ marginTop: '10px' }}>
                <NoQueryC />
              </div>
            )}
          </div>
        }
      />
    );
  }
}
export default connect(({ profitAndLossM, loading }) => ({
  profitAndLossM,
  loading: loading.effects['netValueM/getReNetfrepstat'],
}))(NetValueAnalysis2);
